import React, { Component } from 'react'
import { Result ,List, WhiteSpace, Modal} from 'antd-mobile'
import {connect} from 'react-redux'
import {logoutSubmit} from '../../redux/user.redux'
import cookies from 'browser-cookies'
import {Redirect} from 'react-router-dom'

@connect(
    state => state.user,
    {logoutSubmit}
)
export default class User extends Component {
    constructor(props){
        super(props)
        this.logout = this.logout.bind(this)
    }
    logout(){
       // cookies.erase('userid');
        const alert = Modal.alert;
        const alertInstance = alert('注销', '确认退出吗???', [
            { text: '取消', onPress: () => console.log('cancel'), style: 'default' },
            { text: 'OK', onPress: () => {
                cookies.erase('userid');
                this.props.logoutSubmit();
            }},
        ]);
    }
    render() {
        const props = this.props
        return props.user ? (
            <div>
                <Result
                    img={<img style={{width:50}} src={require(`../avatar-selector/img/${this.props.avatar}.png`)}/>}
                    title={this.props.user}
                    message={props.type === 'boss' ? props.company : null}
                />
                <List
                    renderHeader={()=>'简介'}
                >
                    <List.Item>
                        {props.title}
                        {props.desc.split('\n').map((v,index)=><List.Item.Brief key={index}>{v}</List.Item.Brief>   )}
                    </List.Item>
                </List>   
                <WhiteSpace></WhiteSpace> 
                <List>
                    <List.Item  onClick={this.logout}>退出登录</List.Item>    
                </List>    
            </div>
        ) : <Redirect to={props.redirectTo} /> 
    }
}
